import { Image } from 'expo-image';
import { useState } from 'react';
import { StyleSheet, View as RNView } from 'react-native';
import EditScreenInfo from '@/components/EditScreenInfo';
import { Text, View } from '@/components/Themed';
import QRCodeScreen from '@/app/components/QRCodeScreen/index'
import {size} from '@/app/utils'
import { Checkbox } from 'expo-checkbox';
import Button from '@/app/components/Button'

interface ImageAndQrcodeScreenProps {
  userEmail?: string;
  qrSize?: number;
}

export default function ImageAndQrcodeScreen(props: ImageAndQrcodeScreenProps = {}) {
  const { userEmail = 'boonook@163.com', qrSize = size(240) } = props;
  const [isChecked, setChecked] = useState(false);
  
  return (
    <View style={styles.container}>
      <Text style={styles.title}>首页--</Text>
      <Image
        style={{ width: 200, height: 200 }}
        source={{ uri: 'https://cdn5.nzgeo.com/2019/08/159_Tupaia_01-1600x1251.jpg' }}
        contentFit="cover"
        transition={200}
      />
      <View style={styles.section}>
        <Checkbox
          style={styles.checkbox}
          value={isChecked}
          onValueChange={setChecked}
          color={isChecked ? '#4630EB' : '#ccc'}
        />
        <Text style={styles.paragraph}>Custom colored checkbox</Text>
      </View>
      <Button loading={true} disabled={true} color='#4630EB' style={{marginTop:size(10),borderWidth:size(1),borderColor:'#4630EB',borderStyle:'solid',width:size(200),height:size(40)}}>
        <Text style={styles.paragraph}>Toggle checkbox</Text>
      </Button>
      <View style={styles.separator} lightColor="#eee" darkColor="rgba(255,255,255,0.1)" />
      <EditScreenInfo path="app/(tabs)/index.tsx" /> 
      <QRCodeScreen value={userEmail} size={qrSize} {...props}/>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
  title: {
    fontSize: 20,
    fontWeight: 'bold',
  },
  separator: {
    marginVertical: 30,
    height: 1,
    width: '80%',
  },
  section: {
    flexDirection: 'row',
    alignItems: 'center',
  },
  paragraph: {
    fontSize: 15,
  },
  checkbox: {
    margin: 8,
  },
});
